<template>
  <div class="historyDataDetails" v-init-screen-h="1">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/centerDetails' }"
        >历史数据查询</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ row.data2 }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="history_data_details_box">
      <TaskLeft @submitTaskLeft="submitTaskLeft"></TaskLeft>
      <div class="right" v-init-screen-h="20">
        <!-- <Chart :row="row" ref="chartRef"></Chart> -->
        <div style="border: 1px solid #0da9f2">
          <Chart :tokens="checkList" ref="chartRef" height="197px"></Chart>
          <ChartMsg v-if="!isCasting" :row="row"></ChartMsg>
          <ChartMsgCasting v-else :row="row"></ChartMsgCasting>
        </div>
        <WorkmanshipData
          @handlerExport="handlerExport"
          style="height: 50%"
        ></WorkmanshipData>
      </div>
    </div>
  </div>
</template>

<script>
import TaskLeft from "./components/TaskLeft.vue";
// import Chart from "./components/Chart.vue";
import Chart from "../../equipmentAdmin/components/Chart";
import WorkmanshipData from "./components/WorkmanshipData.vue";
import ChartMsg from "./components/ChartMsg.vue";
import ChartMsgCasting from "./components/ChartMsgCasting.vue";
import { download } from "@/utils/download";
import { TENANT_TITLE, CASTING_TYPE } from "@/utils/local";

export default {
  data() {
    return {
      row: {},
      checkList: {
        check: true,
        color: null,
        data: [],
        devName: "Z2",
        distributionToken: "0e4073a5-fed3-4b12-9436-7c5af7ff6928",
        id: "aabeb338-a411-4dc6-8436-4e66aea79fdc",
        name: "Z2",
        token: "0e4073a5-fed3-4b12-9436-7c5af7ff6928",
        type: 5,
      },
    };
  },
  computed: {
    isCasting() {
      const { name } = this.$store.getters.tenant;
      return name == TENANT_TITLE[2];
    },
  },
  components: {
    ChartMsgCasting,
    ChartMsg,
    TaskLeft,
    WorkmanshipData,
    Chart,
  },
  mounted() {
    this.checkList = {
      check: true,
      color: null,
      data: [],
      devName: "Z2",
      distributionToken: "0e4073a5-fed3-4b12-9436-7c5af7ff6928",
      id: "8e1bca02-b67e-46c5-86ba-4d801a58d558",
      name: "Z2",
      token: "01",
      type: 5,
    };
    this.row = JSON.parse(this.$route.query.row);
    console.log("this.row  :>> ", this.row);
  },
  methods: {
    handlerExport() {
      let herf = "";
      let name = "";

      switch (this.row.data6) {
        case CASTING_TYPE[1]:
          name = CASTING_TYPE[1];
          herf =
            "http://223.223.176.32:30711/iot/006/areaType/%E5%90%8E%E5%A4%84%E7%90%86.xlsx";
          break;
        case CASTING_TYPE[0]:
          name = CASTING_TYPE[0];
          herf =
            "http://223.223.176.32:30711/iot/006/areaType/%E5%9E%8B%E8%8A%AF.xlsx";
          break;
        case CASTING_TYPE[2]:
          name = CASTING_TYPE[2];
          herf =
            "http://223.223.176.32:30711/iot/006/areaType/%E7%86%94%E6%B3%A8.xlsx";
          break;
      }
      console.log("object :>> ", this.row.data6, CASTING_TYPE, herf);
      download(herf, name);
    },
    submitTaskLeft(list) {
      this.$refs.chartRef.dispose1();
      this.$refs.chartRef.init1(list);
    },
  },
};
</script>

<style lang="scss">
.historyDataDetails {
  padding: 0 10px;
  background: url(../../../../../assets/images/applicationCenter/app_bg.jpg)
    no-repeat;
  background-size: cover;
  .right {
    width: 59%;
  }
  /* margin-top: -30px; */
  padding-top: 15px;
  color: #fff;
  .history_data_details_box {
    margin-top: 10px;
    display: flex;
    color: #fff;
    justify-content: space-between;
    height: calc(100vh - 140px) !important;
  }
  .el-breadcrumb__inner {
    color: #8bdaff !important;
  }
  .el-breadcrumb__inner.is-link {
    color: #2680d2 !important;
  }
}
/* #app .main-container {
  background: url(../../../../../assets/images/applicationCenter/app_bg.jpg)
    no-repeat;
  background-size: cover;
} */
</style>